/// @Classname : HcStepsPage
/// @Author :
/// @Time : 2023-09-13 15:32
/// @Description : //todo

import 'package:flutter/material.dart';
import 'package:hc_ui/config/hc_customer_config.dart';
import 'package:hc_ui/theme/hc_common_theme.dart';
import 'package:hc_ui/widget/image/hc_image.dart';
import 'package:hc_ui/widget/steps/hc_steps.dart';
import 'package:hc_ui/widget/title/hc_title.dart';

class HcStepsPage extends StatefulWidget {
  const HcStepsPage({Key? key}) : super(key: key);

  @override
  State<HcStepsPage> createState() => _HcStepsPageState();
}

class _HcStepsPageState extends State<HcStepsPage> {
  int value = 0;

  void _incrementCounter() {
    setState(() {
      value = (value + 1) % 5;
    });
    print("当前 index${value} ");
  }

  @override
  Widget build(BuildContext context) {
    HcCommonTheme theme = HcCustomerConfig().allTheme.commonTheme;
    return Scaffold(
      backgroundColor: theme.fillPageColor,
      appBar: AppBar(
        title: const Text("HcStepsPage"),
      ),
      body: ListView(
        padding: EdgeInsets.symmetric(
            vertical: theme.vSpacingPage, horizontal: theme.hSpacingPage),
        children: [
          HcTitle.dot(
            title: "水平数字展示",
          ),
          HcSteps(
            direction: Axis.horizontal,
            index: value,
            dividerWidget: Icon(Icons.arrow_forward_ios_outlined),
            currentState: HcStepsState.error,
            // enableScroll: true,
            list: [
              HcStepsItem(title: "第一项", desc: "这里是备注"),
              HcStepsItem(title: "第二项", desc: "这里是备注"),
              HcStepsItem(title: "第三项", desc: "这里是备注"),
              HcStepsItem(title: "第四项", desc: "这里是备注"),
            ],
          ),
          HcTitle.dot(
            title: "水平文字在上",
          ),
          HcSteps(
            direction: Axis.horizontal,
            index: value,
            currentState: HcStepsState.error,
            textTopShow: true,
            list: [
              HcStepsItem(
                  title: "第一项是啥阿萨",
                  desc: "这里是备注",
                  verticalContent: HcImage(
                    width: 200,
                    src: 'assets/images/icon.jpeg',
                  )),
              HcStepsItem(title: "第二项", desc: "这里是备注"),
              HcStepsItem(title: "第三项", desc: "这里是备注"),
              HcStepsItem(title: "第四项", desc: "这里是备注"),
            ],
          ),
          HcTitle.dot(
            title: "水平点状展示",
          ),
          HcSteps.dot(
            index: 2,
            currentState: HcStepsState.error,
            textTopShow: false,
            // enableScroll: true,
            list: [
              HcStepsItem(title: "第一项是啥阿萨", desc: "这里是备注"),
              HcStepsItem(title: "第二项", desc: "这里是备注"),
              HcStepsItem(title: "第三项", desc: "这里是备注"),
              HcStepsItem(title: "第四项", desc: "这里是备注"),
            ],
          ),
          HcTitle.dot(
            title: "水平自定义展示",
          ),
          HcSteps(
            index: 2,
            currentState: HcStepsState.error,
            textTopShow: false,
            completeIcon: Icon(Icons.check_outlined),
            errorIcon: Icon(Icons.close),
            progressIcon: Icon(Icons.ac_unit),
            waitIcon: Icon(Icons.access_time),
            // enableScroll: true,
            list: [
              HcStepsItem(title: "第一项是啥阿萨", desc: "这里是备注"),
              HcStepsItem(title: "第二项", desc: "这里是备注"),
              HcStepsItem(title: "第三项", desc: "这里是备注"),
              HcStepsItem(title: "第四项", desc: "这里是备注"),
            ],
          ),
          HcTitle.dot(
            title: "水平多项目滚动",
          ),
          HcSteps(
            index: value,
            // currentState: HcStepsState.error,
            textTopShow: false,
            completeIcon: Icon(Icons.check_outlined),
            errorIcon: Icon(Icons.close),
            progressIcon: Icon(Icons.ac_unit),
            waitIcon: Icon(Icons.access_time),
            // enableScroll: true,
            callback: (index) {
              setState(() {
                value = index;
              });
            },
            list: [
              HcStepsItem(title: "第一项是啥阿萨", desc: "这里是备注"),
              HcStepsItem(title: "第二项", desc: "这里是备注"),
              HcStepsItem(title: "第三项", desc: "这里是备注"),
              HcStepsItem(title: "第四项", desc: "这里是备注"),
              HcStepsItem(title: "第五项", desc: "这里是备注"),
              HcStepsItem(title: "第六项", desc: "这里是备注"),
              HcStepsItem(title: "第七项", desc: "这里是备注"),
              HcStepsItem(title: "第八项", desc: "这里是备注"),
              HcStepsItem(title: "第九项", desc: "这里是备注"),
              HcStepsItem(title: "第十项", desc: "这里是备注"),
            ],
          ),
          HcTitle.dot(
            title: "纵向展示",
          ),
          HcSteps(
            direction: Axis.vertical,
            index: value,
            currentState: HcStepsState.progress,
            // enableScroll: true,
            list: [
              HcStepsItem(title: "第一项是啥阿萨", desc: "这里是备注"),
              HcStepsItem(title: "第二项", desc: "这里是备注"),
              HcStepsItem(title: "第三项", desc: "这里是备注"),
              HcStepsItem(title: "第四项", desc: "这里是备注"),
            ],
          ),
          HcTitle.dot(
            title: "纵向展示自定义内容",
          ),
          HcSteps(
            direction: Axis.vertical,
            padding: const EdgeInsets.symmetric(horizontal: 8),
            index: value,
            currentState: HcStepsState.error,
            // enableScroll: true,
            list: [
              HcStepsItem(
                  title: "第一项是啥阿萨",
                  desc: "这里是备注",
                  verticalContent: HcImage(
                    width: 200,
                    src: 'assets/images/icon.jpeg',
                  )),
              HcStepsItem(title: "第二项", desc: "这里是备注"),
              HcStepsItem(title: "第三项", desc: "这里是备注"),
              HcStepsItem(title: "第四项", desc: "这里是备注"),
            ],
          ),
        ],
      ),

      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}
